<template>
  <TnPopup
    v-model="showPopup"
    open-direction="center"
    close-btn="true"
    close-btn-position="right-top"
    @close="closePopup"
  >
    <view class="textbook">
      <view class="title"> 绑定教材 </view>
      <view class="select_box">
        <w-select
          v-model="chooseValue"
          :list="bookList"
          valueName="bookName"
          keyName="id"
          @change="change"
          placeholder="请选择教材"
          width="100%"
          height="60rpx"
        >
          <!-- bgColor="#5155E6" -->
        </w-select>
      </view>
      <view class="input_box">
        <TnInput
          v-model="inputValue"
          placeholder="请输入教材附赠卡片上的序列号"
          size="sm"
        />
      </view>
      <view class="bottom_line">
        <TnButton
          width="180rpx"
          height="50rpx"
          font-size="30rpx"
          text-color="#000"
          border-color="#BBBBBB"
          plain="true"
          @tap="close"
        >
          取消</TnButton
        >
        <TnButton
          type="primary"
          width="180rpx"
          height="50rpx"
          bg-color="#5155E6"
          font-size="30rpx"
          text-color="#fff"
          @tap="confirm"
        >
          确定</TnButton
        >
      </view>
    </view>
  </TnPopup>
</template>

<script lang="ts" setup>
import {
  ref,
  watch,
  defineProps,
  defineExpose,
  defineEmits,
  onMounted,
} from 'vue'
import {
  getGradesApi,
  getAllGrades,
  getBookListAPi,
  bindBookApi,
  getMyBookListAPi,
} from '@/services/api'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import { onShow } from '@dcloudio/uni-app'
import storageApi from '@/utils/storage'
import { useUserStore } from '@/stores'
const { navBarInfo } = useUniAppSystemRectInfo()
const userStore = useUserStore()
const showPopup = ref(true)
const currentItem = ref({})
const list = ref([])
const currentTabIndex = ref(0)
const currentListItemIndex = ref(1)
const bookId = ref('')
const bookList = ref([])
const myBindBook = ref({})
const emit = defineEmits(['confirm', 'close'])
const props = defineProps({
  // showPopup: {
  //   type: Boolean,
  //   defalut: false,
  // },
  // bookList: {
  //   type: Array,
  //   default: [],
  // },
})
// watch(
//   () => props.showPopup,
//   (newVal) => {
//     showPopup.value = newVal
//     console.log(chooseValue.value)
//   }
// )
const inputValue = ref('')

const chooseValue = ref()
const change = (e) => {
  console.log(e)
  chooseValue.value = e
  bookId.value = e.bookId
}

onMounted(async () => {
  console.log('00000000000000000000000')
  await userStore.setBookList()
  bookList.value = userStore.getBookList
  console.log(bookList.value)
  // getBookList()
})
// onShow(() => {
//   console.log('555555555555')
//   bookList.value = userStore.getBookList
//   console.log(bookList.value)
//   // getBookList()
// })
// const getBookList = async () => {
//   const data = await getBookListAPi()
//   if (data.code === 200) {
//     bookList.value = data.data.bookList
//   }
// }

const closePopup = () => {
  console.log('关闭')
  emit('close')
}
const confirm = async () => {
  if (inputValue.value == '' || bookId.value == '') {
    uni.showToast({ title: '请输入完整的信息', icon: 'none' })
  } else {
    const params = {
      activateCode: inputValue.value,
      bookId: bookId.value,
    }
    const data = await bindBookApi(params)
    if (data.code === 200) {
      // userStore.setBookId(item.bookId)
      // getMyBookList()
      await getBindBookId()
      uni.showToast({ title: '教材绑定成功', icon: 'success' })
      emit('confirm', inputValue.value)
    } else {
      uni.showToast({ title: data.msg, icon: 'none' })
    }
  }
}
//全局设置使用的教材
const getBindBookId = async () => {
  const data = await getMyBookListAPi()
  if (data.code === 200) {
    data.data.bindBookList.forEach((item) => {
      if (item.useStatus == 1) {
        userStore.setBookId(item.bookId)
        userStore.setMyUseBook(item)
      }
    })
  }
}
const close = () => {
  const params = {
    chooseValue: chooseValue.value,
    inputValue: inputValue.value,
  }
  emit('close', params)
}
</script>

<style lang="scss" scoped>
.textbook {
  width: 600rpx;
  padding: 40rpx 60rpx;
  .title {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    color: #101010;
    margin-bottom: 60rpx;
  }
  .select_box {
    width: 100%;
    margin-bottom: 30rpx;
  }
  .bottom_line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 60rpx;
  }
}
</style>
